@import "../../common/activity/act_com";
@import "../../common/activity/pop_user";

.data_des span {
  letter-spacing: 2px;
}

.data_des span strong {
  color: #ffdc00;
  font-weight: 600;
}

.container {
  display: flex;
  flex-direction: column;
}

.container main .banner {
  width: 100%;
  height: 12.4216rem;

  background-size: 100% 100%;
  position: relative;
  left: 0;
  top: 0;
  background-color: #2b2354;
}

.container main .banner .banner_header {
  /* 设置各个星星位置 */
}

.container main .banner .banner_header .night_sky_star {
  width: 0.8rem;
  height: 0.8rem;
  background: url(../../../img/activity/get_star/star.png) no-repeat;
  font-size: 0;
  position: absolute;
  display: block;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  animation: starBlinking 3s infinite ease;
}

.container main .banner .banner_header .star_1 {
  left: 8rem;
  top: 8rem;
  width: 0.8rem;
  height: 0.8rem;
}

.container main .banner .banner_header .star_2 {
  left: 6.66667rem;
  top: 3.33333rem;
  width: 0.53333rem;
  height: 0.53333rem;
}

.container main .banner .banner_header .star_3 {
  left: 2.66667rem;
  top: 4rem;
  width: 0.8rem;
  height: 0.8rem;
}

.container main .banner .banner_header .star_4 {
  left: 1.33333rem;
  top: 0.53333rem;
  width: 0.4rem;
  height: 0.4rem;
}

.container main .banner .banner_header .star_5 {
  left: 1.33333rem;
  top: 4rem;
  width: 0.53333rem;
  height: 0.53333rem;
}

.container main .banner .banner_header .star_6 {
  left: 2.66667rem;
  top: 0.8rem;
  width: 0.26667rem;
  height: 0.26667rem;
}

.container main .banner .banner_header .smile {
  width: 1.33333rem;
  height: 1.6rem;
  background: url(../../../img/activity/get_star/smile.png) no-repeat;
  left: 5.33333rem;
  top: 5.33333rem;
  background-size: 100% auto;
}

.container main .banner .activity_countdown {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.container main .banner .activity_countdown p {
  text-align: center;
  color: #fff;
  width: 100%;
  line-height: 0.8rem;
  height: 0.8rem;
  font-size: 0.37333rem;
  letter-spacing: 1px;
}

.container main .banner .activity_countdown p .end_word {
  color: #ffdc00;
  border-radius: 0.05333rem;
  padding: 0 0.08rem;
  margin: 0 0.08rem;
}

.container main .banner .activity_countdown p .dynamic_time span {
  color: #ffdc00;
  border-radius: 0.05333rem;
  padding: 0 0.08rem;
  margin: 0 0.08rem;
}

.container main .banner .basin {
  width: 5.33333rem;
  position: absolute;
  right: 0;
  bottom: 0;
}

.container main .banner .basin img {
  width: 100%;
}

.container main .banner .activity_slogan {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 1.06667rem;
  padding: 0.42667rem;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}

.container main .banner .activity_slogan h1 {
  text-align: center;
  color: #fff;
  font-size: 0.85333rem;
  line-height: 0.93333rem;
}

.container main .content .status-bar {
  background-color: #2b2354;
  display: -webkit-box;
  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box;
  /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox;
  /* 混合版本语法: IE 10 */
  display: -webkit-flex;
  /* 新版本语法: Chrome 21+ */
  display: flex;
  /* 新版本语法: Opera 12.1, Firefox 22+ */
  flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  padding: 0.4rem;
}

.container main .content .status-bar .grid {
  display: -webkit-box;
  /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box;
  /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox;
  /* 混合版本语法: IE 10 */
  display: -webkit-flex;
  /* 新版本语法: Chrome 21+ */
  display: flex;
  justify-content: space-between;
}

.container main .content .status-bar .grid > div {
  width: 45%;
  flex-grow: 1;
  text-align: center;
  line-height: 1.49333rem;
}

.container main .content .status-bar .grid > div button {
  background: url("../../../img/activity/get_star/button.jpg") no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  width: 100%;
  font-size: 0.42667rem;
  line-height: 1.06667rem;
  height: 1.06667rem;
  border-radius: 0.13333rem;
  color: #942e00;
}

.container main .content .status-bar .grid > div p {
  color: #fff;
  width: 100%;
  line-height: 1.06667rem;
  font-size: 0.37333rem;
  letter-spacing: 2px;
}

.container main .content .status-bar .grid > div p b {
  color: #ffdc00;
}

.container main .content .status-bar .grid .help_cut, .container main .content .status-bar .grid .want_join {
  flex-grow: 0;
}

.container main .content .activity {
  padding: 0 0.4rem 0.4rem;
  background-color: #2b2354;
  background-image: linear-gradient(to bottom, #2b2354 0, #2c2758 43%, #4739b8 63%, #2f68a8 100%);
  position: relative;
  left: 0;
  top: 0;
}

.container main .content .activity .activity_des {
  background-color: rgba(44, 32, 109, 0.3);
  background-image: -webkit-gradient(linear, left top, right top, from(#2f4692), to(#304693));
  background-image: -webkit-linear-gradient(left, #2f4692, #304693);
  background-image: -o-linear-gradient(left, #2f4692, #304693);
  background-image: linear-gradient(to right, #2f4692, #304693);
  border: 0.05333rem solid #30559b;
  border-radius: .3125rem;
  -webkit-box-shadow: inset 0 0 5px rgba(8, 40, 82, 0.2);
  box-shadow: inset 0 0 5px rgba(8, 40, 82, 0.2);
  color: #fff;
  margin-bottom: 0.4rem;
  padding: 0.4rem;
}

.container main .content .activity .activity_des .activity_des_title {
  position: relative;
  font-size: 0.48rem;
  display: inline-block;
  height: 0.74667rem;
  padding: 0.10667rem 0.42667rem;
  color: #ffdc00;
  background-color: #062146;
  left: -0.4rem;
  line-height: 0.74667rem;
  margin-bottom: 0.53333rem;
}

.container main .content .activity .activity_des .activity_des_title:after {
  position: absolute;
  top: 0;
  left: 100%;
  display: block;
  width: 0;
  height: 0;
  content: " ";
  border: 0.48rem solid transparent;
  border-right-width: 0;
  border-left-color: #062146;
}

.container main .content .activity .activity_des h3 {
  line-height: 0.8rem;
  font-size: 0.42667rem;
}

.container main .content .activity .activity_des h3 span {
  color: #ffdc00;
}

.container main .content .activity .activity_des p {
  line-height: 0.66667rem;
  font-size: 0.37333rem;
}

.container main .content .activity .activity_des p span {
  color: #ffdc00;
}

.container main .content .activity .prize_des {
  border-color: #ffdc00;
  padding: 0.4rem;
}

.phb ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  padding: 0.05333rem 0;
}

.phb ul:first-child {
  color: #ffdc00;
}

.phb ul li {
  width: 1.6rem;
  text-align: center;
}

.phb ul li:last-child {
  flex-grow: 1;
  text-align: right;
}

@-webkit-keyframes starBlinking {
  0%, 100%, 50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}

@-o-keyframes starBlinking {
  0%, 100%, 50% {
    -o-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
}

@keyframes starBlinking {
  0%, 100%, 50% {
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.5);
  }
}

.tpc_content {
  margin-bottom: 0.266667rem;
}

.tpc_content img {
  width: 100%;
}

th {
  color: #ffdc00;
}

.activity_des_content {
  li {
    margin-bottom: rem(10);
  }
}

.activity_des:first-child {
  border-color: #ffdc00 !important;
  .activity_des_title {
    margin-bottom: 2.5rem !important;
  }
}

.card-body {
  padding-bottom: .53333rem;
  position: absolute;
  width: 80%;
  left: 10%;
  top: 1.66667rem;
  color: #fff;
  text-align: center;
  h3 {
    font-size: rem(16);
    padding: rem(5) 0;
  }
  span {
    color: #ffdc00;
  }
}
